<script lang="ts" setup name="AdjustmentReason">
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import { cloneDeep } from 'lodash-es'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { Procure } from '~/src/api/interface/procure'
import { createAdjustmentReasonAPI, deleteAdjustmentReasonAPI, editAdjustmentReasonAPI, getAdjustmentReasonAPI } from '~/src/api/procure'
import AdjustmentDialog from '../components/AdjustmentDialog.vue'
import { adjustmentReasonColumns } from './info/columns'
const tableRef = ref<ProTableInstance>()
const initData = { type: 6, content: '', reasonType: 1, stockFlag: 1 }

const adjustmentDialogRef = ref<InstanceType<typeof AdjustmentDialog>>()
const goDetail = (title: string, row?: Partial<Procure.AdjustmentReason>) => {
  adjustmentDialogRef.value?.putParams({
    title,
    data: row ? cloneDeep(row) : cloneDeep(initData),
    api: row ? editAdjustmentReasonAPI : createAdjustmentReasonAPI,
    getTableList: tableRef.value?.getTableList as () => void,
  })
}

const onDelete = () => {
  useDeleteData(deleteAdjustmentReasonAPI, tableRef.value as ProTableInstance)
}
</script>

<template>
  <div class="auto-height-container">
    <pro-table
      ref="tableRef"
      :columns="adjustmentReasonColumns"
      :indent="20"
      :initParam="{ type: 6 }"
      :isCard="false"
      :request-api="getAdjustmentReasonAPI"
      row-key="id"
      title="库存调整原因列表"
    >
      <template #tableHeader>
        <el-button :icon="CirclePlus" type="primary" @click="goDetail('新增库存调整原因')">新增库存调整原因</el-button>
        <el-button :icon="Delete" @click="onDelete">删除</el-button>
      </template>
      <template #content="{ row }">
        <el-button :icon="EditPen" link type="primary" @click.stop="goDetail('编辑库存调整原因', row)">{{ row.content }}</el-button>
      </template>
    </pro-table>
    <adjustment-dialog ref="adjustmentDialogRef" />
  </div>
</template>

<style lang="scss" scoped></style>
